<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
      #view{}
      #view{} .imgbox{float:left;position:relative;width:250px;height: 150px;margin-left: 10px;margin-top: 10px;
      padding:5px;border:solid 1px red;border-radius: 5px;;}
      #view{} .imgbox .close{border: solid 1px red;position: absolute;top: -15px;
      width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
      #view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
    </style>
<title>新增视频</title>
</head>
<body>
<div class="pd-20">
	<form action="/baby/liveVideoShow/addLiveVideoShow" method="post" class="form form-horizontal form-superb" id="form" >
		<div class="row cl">
			<label class="form-label col-1">视频名称:</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="视频名称" id="" name="name">
			</div>
		</div>
		<div class="row cl">
		<label class="form-label col-1">视频类型:</label>
			<div class="formControls col-2"> <span class="select-box">
				<select name="menutype" class="select" id="menu">
					<option value="-1">请选择一个视频类型</option>
					<option value="1">月子馆</option>
					<option value="2">美妈在美国</option>
					<option value="3">赴美生子那些事</option>
				</select>
				</span> </div>
		</div>
		<div class="row cl">
			<label class="form-label col-1">视频地址：</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="视频地址" id="" name="videoUrl">
			</div>
		</div>

		<div class="row cl">
            <label class="form-label col-1">视频简介:</label>
            <div class="formControls col-10">
			     <textarea class="textarea" name="introduce"></textarea>
            </div> 
		</div>

        <div class="row cl">
            <label class="form-label col-1">视频图片:</label>
            <div class="formControls col-10">
                <input type="file" name="file" id="file" datatype="*" nullmsg="请上传图片"  onchange="load(this)"  accept="image/*" class='myfile' />
                请选择jpg,png, jpeg类型的图片
                <div id="view"></div>
            </div> 
        </div>


		<div class="row cl">
			<div class="col-10 col-offset-1">
				<input type="button" class="btn btn-primary radius"  name="submit" onclick="check()" value="提交" class="submit" />
			</div>
		</div>

	</form>
</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script> 
<script src="js/jquery-form.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.min.js" ></script>
<script type="text/javascript" src="js/rule.js" ></script>
<script>

$('body').on('click','.close',function(){
  $(this).parent('.imgbox').remove();
});

$(document).ready(function(){

        $('#form').ajaxForm(function(data){

          //  alert(data);//弹出ajax请求后的回调结果，data回调数据  onclick="sub()"
            if(data.code =="2000" ){ 
             alert(data.message); 
             window.location.href='superb.html'
           //  console.log(data);  
             //setCookie("username",data.data.userName);
           	 
            // window.location.reload();   
         }else{  
              alert(data.message); 
             console.log(data);  
         }  
        });

});
function check(){
	
	var options=$("#menu option:selected");  
	if(options.val() ==-1){
		alert('请选择一个视频类型');
		return;
	}
	 $('#form').submit();
}
function load(file) {
	  var num=1;
	  if (file.files) {
	  $('.imgbox').remove()
	  var reader = new FileReader();
	  reader.readAsDataURL(file.files[0]);
	  reader.onload = function(evt) {
		  var imgbox=$('<div></div>');
		  imgbox.addClass('imgbox');
		  $('#view').append(imgbox);

		  var imgs = $('<input type="image" />');
		  imgs.attr('name','mum'+num);
		  num++;
		  imgs.appendTo(imgbox);
		  imgs.attr('src', evt.target.result);
		}
	}
}



</script>

</body>
</html>